<template>
	<view class="brand-story">
		<view class="story-header">
			<image src="/static/images/brand-banner.jpg" mode="aspectFill" class="banner-img"></image>
			<text class="brand-title">ENKILIFE</text>
		</view>
		<view class="story-content">
			<view class="section">
				<text class="section-title">品牌简介</text>
				<text class="section-text">ENKILIFE是一家专注于生物科技的创新企业，致力于为全球客户提供高质量的生物试剂和解决方案。</text>
			</view>
			<view class="section">
				<text class="section-title">品牌理念</text>
				<text class="section-text">以科技创新为驱动，以质量为生命，为生命科学研究提供可靠的产品支持。</text>
			</view>
			<view class="section">
				<text class="section-title">发展历程</text>
				<view class="timeline">
					<view class="timeline-item">
						<text class="time">2020</text>
						<text class="event">公司成立</text>
					</view>
					<view class="timeline-item">
						<text class="time">2021</text>
						<text class="event">获得多项专利认证</text>
					</view>
					<view class="timeline-item">
						<text class="time">2022</text>
						<text class="event">产品线扩展至全球市场</text>
					</view>
					<view class="timeline-item">
						<text class="time">2023</text>
						<text class="event">建立现代化研发中心</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'BrandStory'
}
</script>

<style lang="scss" scoped>
.brand-story {
	.story-header {
		position: relative;
		height: 400rpx;
		
		.banner-img {
			width: 100%;
			height: 100%;
		}
		
		.brand-title {
			position: absolute;
			bottom: 40rpx;
			left: 40rpx;
			color: #fff;
			font-size: 48rpx;
			font-weight: bold;
			text-shadow: 0 2px 4px rgba(0,0,0,0.3);
		}
	}
	
	.story-content {
		padding: 40rpx;
		
		.section {
			margin-bottom: 60rpx;
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}
			
			.section-text {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
			}
			
			.timeline {
				margin-top: 30rpx;
				
				.timeline-item {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					padding-left: 20rpx;
					border-left: 4rpx solid #FF4D4D;
					
					.time {
						font-size: 28rpx;
						font-weight: bold;
						color: #FF4D4D;
						margin-right: 20rpx;
						min-width: 80rpx;
					}
					
					.event {
						font-size: 28rpx;
						color: #666;
					}
				}
			}
		}
	}
}
</style> 